<template>
	<view class="my_list">
		<uv-navbar leftIcon="arrow-leftward" leftIconColor="#FFF" placeholder autoBack bgColor="#161714">
			<template v-slot:center>
				<view class="center_slot">订单</view>
			</template>
		</uv-navbar>
		<view class="tabs">
			<view class="tabs_view">
				<view class="item" :class="active==1?'active':''" @click="changeActive(1)">拥有</view>
				<view class="item" :class="active==2?'active':''" @click="changeActive(2)">出售中</view>
				<view class="item" :class="active==3?'active':''" @click="changeActive(3)">已交易</view>
			</view>
		</view>
		<scroll-view scroll-y class="scroll_view" @scrolltolower="loadmore">
			<view class="list">
				<view class="item" v-for="item in _this.list">
					<view class="status" v-if="active==2">出售中</view>
					<view class="status end" v-else-if="active==3">已售出</view>
					<view class="cover">
						<image :src="item.product_cover" mode="widthFix"></image>
						<!-- <view class="label">#101010</view> -->
					</view>
					<view class="name">{{item.product_name}}</view>
					<view class="cell_view">
						<view class="cell">完成交易价格: ${{item.price}}</view>
						<view class="cell">完成交易时间: {{item.created_at}}</view>
					</view>
					<view class="item_foot">
						<view class="price">${{item.price}}</view>
						<view class="btn_view">
							<view class="btn" @click="open_box(item.id)" v-if="active==1&&type==2">开启</view>
							<view class="btn" @click="sell(item.id)" v-if="active==1">出售</view>
							<view class="btn cancel" @click="cancel(item.id)" v-else-if="active==2">取消出售</view>
						</view>
					</view>
				</view>
				<uv-load-more :status="_this.loadmore_status" line @loadmore="loadmore" />
				<image src="@/static/images/open.png" class="apng" v-if="apng"></image>
			</view>
		</scroll-view>
		<uv-popup ref="popupRef" round="10" bgColor="none">
			<component :is="currentComponent" :id="props_id" @close="popupRef.close" @reload="reload" />
		</uv-popup>

		<uv-popup ref="resRef" round="10" bgColor="none">
			<OpenResult :data="props_data" @reload="reload" />
		</uv-popup>
	</view>
</template>

<script setup>
	import {
		orderLists,
		orderOpen
	} from "@/request/api";
	import Sell from "@/components/my/Sell.vue";
	import Cancel from "@/components/my/Cancel.vue";
	import OpenResult from "@/components/my/OpenResult.vue";
	import {
		onLoad
	} from "@dcloudio/uni-app";
	import {
		ref,
		shallowRef
	} from "vue";
	import useList from "@/hooks/useList.js";
	const {
		_this
	} = useList();

	const active = ref(1);
	let product_id = "";
	const getList = async () => {
		let data = {
			page: _this.page,
			limit: _this.limit,
			product_id: product_id,
		};
		if (active.value == 1) {
			data.status = 1;
		}
		if (active.value == 2) {
			data.is_sell = 1;
		}
		if (active.value == 3) {
			data.status = 10;
			data.type = 5;
		}
		let {
			list
		} = await orderLists(data);
		_this.last_page = list.last_page;
		list = list.list;
		_this.list = _this.page == 1 ? list : [..._this.list, ...list];
		_this.loadmore_status = _this.last_page == _this.page ? 'nomore' : 'loadmore';
	};
	const changeActive = (value) => {
		active.value = value;
		_this.list = [];
		_this.page = 1;
		getList();
	};
	const loadmore = () => {
		if (_this.page >= _this.last_page) return;
		_this.page++;
		getList();
	};
	const reload = () => {
		popupRef.value.close();
		resRef.value.close();
		_this.list = [];
		_this.page = 1;
		getList();
	};
	const type = ref("");
	onLoad((options) => {
		type.value = options.type;
		product_id = options.id;
		getList();
	});

	const resRef = shallowRef(),
		props_data = ref({}),
		apng = ref(false);
	const open_box = async (id) => {
		let {
			product
		} = await orderOpen({
			id
		});
		props_data.value = product;
		apng.value = true;
		setTimeout(() => {
			apng.value = false;
			resRef.value.open("center");
		}, 1800);
	};

	const currentComponent = shallowRef();
	const popupRef = shallowRef();
	const props_id = ref({});
	const sell = (id) => {
		props_id.value = id;
		currentComponent.value = Sell;
		popupRef.value.open("bottom");
	};
	const cancel = (id) => {
		props_id.value = id;
		currentComponent.value = Cancel;
		popupRef.value.open("center");
	};
</script>

<style scoped lang="scss">
	$tabsHeight: 168rpx;

	.my_list {
		height: 100vh;
		overflow: hidden;

		.center_slot {
			color: #FFFFFF;
			font-size: 14px;
			font-weight: 800;
		}

		.tabs {
			height: $tabsHeight;
			padding: 30rpx 30rpx 50rpx;
			box-sizing: border-box;

			.tabs_view {
				width: 100%;
				height: 88rpx;
				border-radius: 44rpx;
				padding: 0 10rpx;
				box-sizing: border-box;
				background: #2E2E2E;
				display: flex;
				justify-content: space-between;
				align-items: center;

				.item {
					width: 220rpx;
					height: 78rpx;
					line-height: 78rpx;
					text-align: center;
					color: #CCCCCC;
					font-size: 32rpx;
					font-weight: bold;
					border-radius: 39rpx;

					&.active {
						color: #333333;
						background: #DDF247;
					}
				}
			}
		}

		.scroll_view {
			height: calc(100vh - #{$navBarHeight} - #{$tabsHeight} - var(--window-top) - var(--window-bottom));
			position: relative;

			.apng {
				width: 500rpx;
				height: 481rpx;
				position: absolute;
				left: 50%;
				top: 50%;
				transform: translate(-50%, -50%);
				z-index: 2;
			}

			.list {
				padding: 0rpx 30rpx;
				box-sizing: border-box;

				.item {
					border-radius: 10rpx;
					margin-bottom: 20rpx;
					padding: 20rpx;
					box-sizing: border-box;
					background: #2E2E2E;
					position: relative;

					.status {
						width: 110rpx;
						height: 40rpx;
						line-height: 40rpx;
						text-align: center;
						color: #000000;
						font-size: 24rpx;
						border-radius: 20rpx 0rpx 0rpx 20rpx;
						background: #DDF247;
						position: absolute;
						right: 0;
						top: 40rpx;
						z-index: 2;

						&.end {
							color: #000000;
							background: #FFFFFF;
						}
					}

					.cover {
						border-radius: 10rpx;
						background: #444444;
						overflow: hidden;
						position: relative;

						image {
							width: 650rpx;
							// height: 650rpx;
						}

						.label {
							height: 32rpx;
							line-height: 32rpx;
							color: #FFFFFF;
							font-size: 20rpx;
							font-weight: 400;
							border-radius: 5rpx;
							padding: 0 12rpx;
							box-sizing: border-box;
							background: rgba(255, 255, 255, 0.1);
							position: absolute;
							left: 20rpx;
							bottom: 20rpx;
							z-index: 2;
						}
					}

					.name {
						color: #FFFFFF;
						font-size: 36rpx;
						font-weight: 800;
						padding-top: 30rpx;
						padding-bottom: 18rpx;
						padding-left: 10rpx;
						box-sizing: border-box;
					}

					.cell_view {
						padding: 10rpx;
						box-sizing: border-box;

						.cell {
							color: #999999;
							font-size: 30rpx;
							padding-bottom: 20rpx;
							box-sizing: border-box;
						}
					}

					.item_foot {
						padding: 0 10rpx;
						box-sizing: border-box;
						display: flex;
						justify-content: space-between;

						.price {
							color: #DDF247;
							font-size: 30rpx;
							padding-top: 10rpx;
							box-sizing: border-box;
						}

						.btn_view {
							display: flex;

							.btn {
								width: 200rpx;
								height: 78rpx;
								line-height: 78rpx;
								text-align: center;
								color: #111111;
								font-size: 28rpx;
								font-weight: bold;
								border-radius: 20rpx;
								margin-left: 10rpx;
								background: #DDF247;

								&.cancel {
									color: #CCCCCC;
									background: #444444;
								}
							}
						}
					}
				}
			}
		}
	}
</style>